<template>
    <div class="detailMainBox">
        <a-row type="flex" align="top">
        
            <a-col :span="18" class="main-container" max-height="auto">
                <div class="topicList" style="background-color: #fff; border-radius: 10px;">
                    <div class="topicItem" v-if="!state.loading">
                        <div class="avatarBox">
                            <router-link tag="a" v-if="postsDetailsData.username != null && postsDetailsData.username != ''" class="avatarLink" :to="{path:'/user/control/home',query: {userName: postsDetailsData.username}}" target="_blank">
                                <img :src="postsDetailsData.avatar" width="62" height="62" class="img"/>
                            </router-link>
                        </div>
                        
                        <div class="content">
                            
                            <ul class="info">
                                <li>
                                    <router-link tag="a" class="userName" :to="{path:'/user/control/home',query: {userName: postsDetailsData.userName}}" target="_blank">
                                        {{postsDetailsData.username}}
                                    </router-link>
                                </li>
                            </ul>
                            <div class="time">
                                <div class="postTime">
                                    {{postsDetailsData.createTime}}
                                </div>
                            </div>
    
                            <h2 class="title">
                                <router-link tag="a" :to="{path: '/social/detail', query:{ postId : postsDetailsData.postId}}" target="_blank">
                                    {{postsDetailsData.title}}
                                </router-link>
                            
                                <span class="top" v-if="false">置顶</span>
                                
                            </h2>
    
                            <div class="detail">
                                <router-link tag="a" :to="{path: '/social/detail', query:{ postId : postsDetailsData.postId}}" target="_blank">
                                    <h2 class="summary" v-html="sanitizeHtml(postsDetailsData.content)">
                                    </h2>
                                </router-link>
                            </div>
                            
                            <div class="bottomInfo">
                                <div class="tag-container" >
                                    <span class="tag" v-for="tag of postsDetailsData.tags">{{tag}}</span>
                                </div>
                                <div class="statistic">
                                    <div class="iconItem">
                                        <div @click="handleLikePost(postsDetailsData.postId, postsDetailsData.userId, postsDetailsData.likeFlag)">
                                            <div v-if="!postsDetailsData.likeFlag" class="icon-wrapper">
                                                <svg t="1735046296972" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6672" width="15" height="15">
                                                    <path d="M768 937.353846h-567.138462c-63.803077 0-115.790769-51.987692-115.790769-115.790769V507.273846c0-63.803077 51.987692-115.790769 115.790769-115.790769h117.366154c13.390769-5.513846 88.221538-42.535385 95.31077-241.033846 0-33.083077 24.418462-58.289231 60.652307-63.015385 58.289231-7.876923 133.907692 31.507692 154.387693 102.4 18.116923 64.590769 0 150.449231-14.178462 201.649231h208.738462c33.870769 0 66.166154 14.966154 88.221538 40.96 22.055385 25.993846 31.507692 60.652308 25.206154 94.523077l-55.138462 314.289231c-8.664615 55.926154-56.713846 96.098462-113.427692 96.098461z m-567.138462-482.067692c-29.144615 0-52.775385 23.630769-52.775384 52.775384v314.289231c0 29.144615 23.630769 52.775385 52.775384 52.775385h567.138462c25.993846 0 47.261538-18.116923 51.987692-43.323077l55.138462-314.289231c2.363077-15.753846-1.575385-30.72-11.815385-43.323077-10.24-11.815385-24.418462-18.904615-40.172307-18.904615h-252.061539c-10.24 0-19.692308-4.726154-25.993846-13.390769-5.513846-8.664615-7.089231-19.692308-3.938462-29.144616 13.390769-35.446154 44.110769-141.784615 25.993847-204.8-8.664615-29.932308-35.446154-48.049231-57.501539-54.350769-18.116923-5.513846-30.72-3.150769-34.658461-1.575385v0.787693c-8.664615 268.603077-133.907692 299.323077-148.086154 301.686154-1.575385 0-3.938462 0.787692-5.513846 0.787692H200.861538z" fill="#2c2c2c" p-id="6673"></path>
                                                </svg>
                                            </div>
                                            <div v-else>
                                                <svg t="1735046296972" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6672" width="15" height="15">
                                                    <path d="M768 937.353846h-567.138462c-63.803077 0-115.790769-51.987692-115.790769-115.790769V507.273846c0-63.803077 51.987692-115.790769 115.790769-115.790769h117.366154c13.390769-5.513846 88.221538-42.535385 95.31077-241.033846 0-33.083077 24.418462-58.289231 60.652307-63.015385 58.289231-7.876923 133.907692 31.507692 154.387693 102.4 18.116923 64.590769 0 150.449231-14.178462 201.649231h208.738462c33.870769 0 66.166154 14.966154 88.221538 40.96 22.055385 25.993846 31.507692 60.652308 25.206154 94.523077l-55.138462 314.289231c-8.664615 55.926154-56.713846 96.098462-113.427692 96.098461z m-567.138462-482.067692c-29.144615 0-52.775385 23.630769-52.775384 52.775384v314.289231c0 29.144615 23.630769 52.775385 52.775384 52.775385h567.138462c25.993846 0 47.261538-18.116923 51.987692-43.323077l55.138462-314.289231c2.363077-15.753846-1.575385-30.72-11.815385-43.323077-10.24-11.815385-24.418462-18.904615-40.172307-18.904615h-252.061539c-10.24 0-19.692308-4.726154-25.993846-13.390769-5.513846-8.664615-7.089231-19.692308-3.938462-29.144616 13.390769-35.446154 44.110769-141.784615 25.993847-204.8-8.664615-29.932308-35.446154-48.049231-57.501539-54.350769-18.116923-5.513846-30.72-3.150769-34.658461-1.575385v0.787693c-8.664615 268.603077-133.907692 299.323077-148.086154 301.686154-1.575385 0-3.938462 0.787692-5.513846 0.787692H200.861538z" fill="#4d9cdd" p-id="6673"></path>
                                                </svg>
                                            </div>
                                        </div>
                                        <p :style="{color: !postsDetailsData.likeFlag ? '#2c2c2c' : '#4d9cdd'}">{{postsDetailsData.likeCount}}</p>
                                    </div>
                                    <div class="iconItem">
                                        <div @click="handleCollectPost(postsDetailsData.postId, postsDetailsData.userId, postsDetailsData.collectFlag)">
                                            <div v-if="!postsDetailsData.collectFlag" class="icon-wrapper">
                                                <svg t="1734707381648" class="icon" viewBox="0 0 1059 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4419" width="15" height="15">
                                                  <path d="M253.488042 1024c-16.9 0-33.2875-5.1125-47.6125-15.3625-26.625-18.425-39.425-49.6625-34.3125-81.925l40.9625-251.9c1.5375-10.2375-1.5375-20.475-8.7-27.65L28.213042 466.4375c-22.0125-22.525-29.1875-55.3-19.45-84.9875 9.725-29.7 35.325-51.2 66.05-55.8125l237.575-36.35c10.75-1.5375 19.4625-8.1875 24.0625-17.925L441.388042 48.125c13.825-29.7 42.5-48.125 75.2625-48.125s61.4375 18.4375 75.2625 48.125l104.45 223.2375c4.6125 9.725 13.825 16.375 24.0625 17.925L958.000542 325.625a82.355 82.355 0 0 1 66.05 55.8125c10.2375 29.7 2.5625 62.4625-19.45 84.9875l-175.625 180.7375c-7.1625 7.175-10.2375 17.925-8.7 27.65l40.9625 251.9c5.125 31.75-8.1875 63.4875-34.3 81.925-26.1125 18.4375-59.9 20.4875-88.0625 4.6125l-206.85-114.6875c-9.725-5.1125-20.9875-5.1125-30.7125 0l-207.3625 115.2c-12.8125 6.65-26.6375 10.2375-40.4625 10.2375zM516.650542 51.2c-12.8 0-23.55 7.1625-29.1875 18.4375L383.525542 292.875c-11.775 25.0875-35.325 43.0125-62.975 47.1l-237.575 36.35c-12.2875 2.05-21.5 9.7375-25.6 21.5-4.1 11.775-1.025 24.0625 7.675 32.775L240.688042 611.325c18.4375 18.95 26.625 45.5625 22.525 71.675L222.250542 934.9125c-2.05 12.8 3.075 24.575 13.3125 31.7375 10.2375 7.175 23.0375 7.6875 33.7875 1.5375l207.3625-115.2c25.0875-13.825 55.3-13.825 80.3875 0l207.3625 115.2c10.75 6.1375 23.55 5.625 33.8-1.5375 10.2375-7.1625 15.3625-18.95 13.3125-31.7375L770.625542 683.0125c-4.1-26.1125 4.1-52.7375 22.525-71.675l175.625-180.7375c8.7-8.7 11.2625-20.9875 7.675-32.775-4.0875-11.775-13.3125-19.9625-25.6-21.5l-237.5625-36.35c-27.65-4.0875-51.2-22.0125-62.975-47.1L545.838042 69.6375c-5.625-11.2625-16.375-18.4375-29.1875-18.4375z m0 0" p-id="4420" fill="#2c2c2c"></path>
                                                </svg>
                                            </div>
                                            <div v-else>
                                                <svg t="1734707381648" class="icon" viewBox="0 0 1059 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4419" width="15" height="15">
                                                  <path d="M253.488042 1024c-16.9 0-33.2875-5.1125-47.6125-15.3625-26.625-18.425-39.425-49.6625-34.3125-81.925l40.9625-251.9c1.5375-10.2375-1.5375-20.475-8.7-27.65L28.213042 466.4375c-22.0125-22.525-29.1875-55.3-19.45-84.9875 9.725-29.7 35.325-51.2 66.05-55.8125l237.575-36.35c10.75-1.5375 19.4625-8.1875 24.0625-17.925L441.388042 48.125c13.825-29.7 42.5-48.125 75.2625-48.125s61.4375 18.4375 75.2625 48.125l104.45 223.2375c4.6125 9.725 13.825 16.375 24.0625 17.925L958.000542 325.625a82.355 82.355 0 0 1 66.05 55.8125c10.2375 29.7 2.5625 62.4625-19.45 84.9875l-175.625 180.7375c-7.1625 7.175-10.2375 17.925-8.7 27.65l40.9625 251.9c5.125 31.75-8.1875 63.4875-34.3 81.925-26.1125 18.4375-59.9 20.4875-88.0625 4.6125l-206.85-114.6875c-9.725-5.1125-20.9875-5.1125-30.7125 0l-207.3625 115.2c-12.8125 6.65-26.6375 10.2375-40.4625 10.2375zM516.650542 51.2c-12.8 0-23.55 7.1625-29.1875 18.4375L383.525542 292.875c-11.775 25.0875-35.325 43.0125-62.975 47.1l-237.575 36.35c-12.2875 2.05-21.5 9.7375-25.6 21.5-4.1 11.775-1.025 24.0625 7.675 32.775L240.688042 611.325c18.4375 18.95 26.625 45.5625 22.525 71.675L222.250542 934.9125c-2.05 12.8 3.075 24.575 13.3125 31.7375 10.2375 7.175 23.0375 7.6875 33.7875 1.5375l207.3625-115.2c25.0875-13.825 55.3-13.825 80.3875 0l207.3625 115.2c10.75 6.1375 23.55 5.625 33.8-1.5375 10.2375-7.1625 15.3625-18.95 13.3125-31.7375L770.625542 683.0125c-4.1-26.1125 4.1-52.7375 22.525-71.675l175.625-180.7375c8.7-8.7 11.2625-20.9875 7.675-32.775-4.0875-11.775-13.3125-19.9625-25.6-21.5l-237.5625-36.35c-27.65-4.0875-51.2-22.0125-62.975-47.1L545.838042 69.6375c-5.625-11.2625-16.375-18.4375-29.1875-18.4375z m0 0" p-id="4420" fill="#4d9cdd"></path>
                                                </svg>
                                            </div>
                                        </div>
                                        <p :style="{color: !postsDetailsData.collectFlag ? '#2c2c2c' : '#4d9cdd'}">{{postsDetailsData.collectCount}}</p>
                                    </div>
                                    <div class="iconItem">
                                        <svg t="1734707421038" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5556" width="15" height="15"><path d="M512 608a96 96 0 1 1 0-192 96 96 0 0 1 0 192m0-256c-88.224 0-160 71.776-160 160s71.776 160 160 160 160-71.776 160-160-71.776-160-160-160" p-id="5557" fill="#2c2c2c"></path><path d="M512 800c-212.064 0-384-256-384-288s171.936-288 384-288 384 256 384 288-171.936 288-384 288m0-640C265.248 160 64 443.008 64 512c0 68.992 201.248 352 448 352s448-283.008 448-352c0-68.992-201.248-352-448-352" p-id="5558" fill="#2c2c2c"></path></svg>
                                        <P>{{postsDetailsData.viewCount}}</P>
                                    </div>
                                    
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <a-skeleton :loading="state.loading" style="padding-top: 25px;" />
                </div>
                <div class="topicList" style="background-color: #fff; border-radius: 10px;margin-top: 20px;">
                    <div class="fish-site-comment-box">
                        <a-tabs v-model:activeKey="activeKey">
                          <a-tab-pane key="comment" tab="评论">
                            <!--  评论排序条件   -->
                            <a-row :gutter="24" :align="'middle'" :justify="'space-between'" class="comment-header">
                              <a-col :span="5"><span class="comment-count">共 {{
                                commentListData.length ? commentListData.length : 0
                                  }} 条评论</span>
                              </a-col>
                              <a-col :span="4">
                                <a-radio-group v-model:value="ratingAndCreatedBtn" @change="handleOrder" button-style="solid">
                                  <a-radio-button value="rating">最高</a-radio-button>
                                  <a-radio-button value="create_time">最新</a-radio-button>
                                </a-radio-group>
                              </a-col>
                            </a-row>
                
                            <!-- 发布评论 -->
                            <a-comment>
                              <template #avatar>
                                <a-avatar size="large" :src="userStore.avatar" :alt="userStore.nickname" />
                              </template>
                              <template #content>
                                <div class="comment-txt-box" style="box-shadow: rgb(238, 238, 238) 0 0 6px;">
                                  <a-form-item style="padding: 12px 5px; height: 60px; background-color: #F3F4F6">
                                    <a-textarea :bordered="false"
                                      style="background-color: #F3F4F6; max-height: 200px; overflow: hidden; " placeholder="大家快来评价~"
                                      v-model:value="commentValue" autosize />
                                  </a-form-item>
                                  <div class="comment-txt-footer">
                                    <!--      表情列表        -->
                                    <a-space :size="8">
                                      <V3Emoji @click-emoji="onVue3Emoji">
                                        <a-button type="text">
                                          <template #icon>
                                            <SmileOutlined />
                                          </template>
                                          表情
                                        </a-button>
                                      </V3Emoji>
                                    </a-space>
                                    <a-button html-type="submit" style="border-radius: 20px; width: 80px;" :loading="submitting"
                                      type="primary" @click="handleSubmit">
                                      发布
                                    </a-button>
                                  </div>
                                </div>
                              </template>
                            </a-comment>
                
                            <a-list class="comment-list" :loading="initLoading" item-layout="horizontal"
                              :data-source="commentListData" v-show="commentListData.length > 0">

                              <template #loadMore>
                                <div v-if="!initLoading" :style="{ textAlign: 'center', marginTop: '12px', height: '32px', lineHeight: '32px' }">
                                  <a-button 
                                    v-if="!loading && commentListData.length < total" 
                                    @click="onLoadingMore"
                                    :loading="loading"
                                  >
                                    加载更多
                                  </a-button>
                                  <a-divider v-else-if="commentListData.length > 0">
                                    {{ commentListData.length >= total ? '已经到底了 🤐' : '加载中...' }}
                                  </a-divider>
                                </div>
                              </template>
                              <!-- 内容 -->
                              <template #renderItem="{ item }">
                                <transition-group name="comment">
                                  <a-list-item :id="`comment-${item.commentId}`"
                                  >
                                    <a-comment
                                    :class="{'highlight-comment': highlightedCommentId === item.commentId}"
                                    >
                                      <template #author>
                                        <router-link 
                                          tag="a" 
                                          class="userName" 
                                          :to="{path:'/user/control/home',query: {userId: item.userId}}" 
                                          target="_blank"
                                        >
                                          {{item.username}}
                                        </router-link>
                                      </template>
                                      <template #avatar>
                                        <!-- 用户头像鼠标悬停气泡 -->
                                        <div class="avatarBox">
                                          <a-popover
                                              trigger="hover"
                                              placement="right"
                                              @mouseenter="handleMouseEnter(item.userId)">
                                              <template #content>
                                                  <div class="user-popover">
                                                      <a-spin :spinning="!userInfo[item.userId]" :indicator="indicator">
                                                          <div class="user-info" v-if="userInfo[item.userId]">
                                                              <img :src="item.avatar" class="avatar"/>
                                                              <div class="info">
                                                                  <div class="name">{{item.username}}</div>
                                                                  <div class="stats">
                                                                      <span>性别: {{userInfo[item.userId].sex=='1'?'男':'女' || '未填写'}}</span>
                                                                      <span>帖子: {{userInfo[item.userId].postsCount}}</span>
                                                                  </div>
                                                              </div>
                                                          </div>
                                                          <div class="remark">{{userInfo[item.userId]?.email || '未绑定邮箱~'}}</div>
                                                          <div class="remark">{{userInfo[item.userId]?.remark || '这个人很懒,什么都没写~'}}</div>
                                                      </a-spin>
                                                  </div>
                                              </template>
                                              <router-link tag="a" 
                                                  v-if="item.username" 
                                                  class="avatarLink" 
                                                  :to="{path:'/user/control/home',query: {userId: item.userId}}" 
                                                  target="_blank">
                                                  <img :src="item.avatar" width="62" height="62" class="img"/>
                                              </router-link>
                                          </a-popover>
                                        </div>
                                      </template>
                                      <template #datetime>
                                          <a-tooltip :title="item.createTime">
                                            <span>{{ item.createTime }}</span>
                                          </a-tooltip>
                                          <a-tag v-if="item.userId === socialStore.social.userId" color="cyan"
                                            style="margin-left: 8px">发布者</a-tag>
                                      </template>
                                      <template #content>
                                        <div style="display: flex;justify-content: space-between">
                                          <p style="width: 100%;">
                                            {{ item.content }}
                                          </p>
                                        </div>
                                      </template>
                                      <template #actions>
                                          <div key="comment-basic-like" class="comment-like">
                                              <div @click="handleLike(item.commentId,item.likeFlag)">
                                                  <template v-if="!item.likeFlag">
                                                      <svg t="1735046296972" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6672" width="15" height="15"><path d="M768 937.353846h-567.138462c-63.803077 0-115.790769-51.987692-115.790769-115.790769V507.273846c0-63.803077 51.987692-115.790769 115.790769-115.790769h117.366154c13.390769-5.513846 88.221538-42.535385 95.31077-241.033846 0-33.083077 24.418462-58.289231 60.652307-63.015385 58.289231-7.876923 133.907692 31.507692 154.387693 102.4 18.116923 64.590769 0 150.449231-14.178462 201.649231h208.738462c33.870769 0 66.166154 14.966154 88.221538 40.96 22.055385 25.993846 31.507692 60.652308 25.206154 94.523077l-55.138462 314.289231c-8.664615 55.926154-56.713846 96.098462-113.427692 96.098461z m-567.138462-482.067692c-29.144615 0-52.775385 23.630769-52.775384 52.775384v314.289231c0 29.144615 23.630769 52.775385 52.775384 52.775385h567.138462c25.993846 0 47.261538-18.116923 51.987692-43.323077l55.138462-314.289231c2.363077-15.753846-1.575385-30.72-11.815385-43.323077-10.24-11.815385-24.418462-18.904615-40.172307-18.904615h-252.061539c-10.24 0-19.692308-4.726154-25.993846-13.390769-5.513846-8.664615-7.089231-19.692308-3.938462-29.144616 13.390769-35.446154 44.110769-141.784615 25.993847-204.8-8.664615-29.932308-35.446154-48.049231-57.501539-54.350769-18.116923-5.513846-30.72-3.150769-34.658461-1.575385v0.787693c-8.664615 268.603077-133.907692 299.323077-148.086154 301.686154-1.575385 0-3.938462 0.787692-5.513846 0.787692H200.861538z" fill="#2c2c2c" p-id="6673"></path><path d="M200.861538 423.778462c-46.473846 0-84.283077 37.809231-84.283076 84.283076v314.289231c0 46.473846 37.809231 84.283077 84.283076 84.283077h72.467693V423.778462h-72.467693z" fill="#2c2c2c" p-id="6674"></path><path d="M273.329231 937.353846h-72.467693c-63.803077 0-115.790769-51.987692-115.790769-115.790769V507.273846c0-63.803077 51.987692-115.790769 115.790769-115.790769h72.467693c17.329231 0 31.507692 14.178462 31.507692 31.507692V905.846154c0 17.329231-14.178462 31.507692-31.507692 31.507692z m-72.467693-482.067692c-29.144615 0-52.775385 23.630769-52.775384 52.775384v314.289231c0 29.144615 23.630769 52.775385 52.775384 52.775385h40.96V455.286154h-40.96z" fill="#2c2c2c" p-id="6675"></path></svg>
                                                  </template>
                                                  <template v-else>
                                                      <svg t="1735046296972" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6672" width="15" height="15"><path d="M768 937.353846h-567.138462c-63.803077 0-115.790769-51.987692-115.790769-115.790769V507.273846c0-63.803077 51.987692-115.790769 115.790769-115.790769h117.366154c13.390769-5.513846 88.221538-42.535385 95.31077-241.033846 0-33.083077 24.418462-58.289231 60.652307-63.015385 58.289231-7.876923 133.907692 31.507692 154.387693 102.4 18.116923 64.590769 0 150.449231-14.178462 201.649231h208.738462c33.870769 0 66.166154 14.966154 88.221538 40.96 22.055385 25.993846 31.507692 60.652308 25.206154 94.523077l-55.138462 314.289231c-8.664615 55.926154-56.713846 96.098462-113.427692 96.098461z m-567.138462-482.067692c-29.144615 0-52.775385 23.630769-52.775384 52.775384v314.289231c0 29.144615 23.630769 52.775385 52.775384 52.775385h567.138462c25.993846 0 47.261538-18.116923 51.987692-43.323077l55.138462-314.289231c2.363077-15.753846-1.575385-30.72-11.815385-43.323077-10.24-11.815385-24.418462-18.904615-40.172307-18.904615h-252.061539c-10.24 0-19.692308-4.726154-25.993846-13.390769-5.513846-8.664615-7.089231-19.692308-3.938462-29.144616 13.390769-35.446154 44.110769-141.784615 25.993847-204.8-8.664615-29.932308-35.446154-48.049231-57.501539-54.350769-18.116923-5.513846-30.72-3.150769-34.658461-1.575385v0.787693c-8.664615 268.603077-133.907692 299.323077-148.086154 301.686154-1.575385 0-3.938462 0.787692-5.513846 0.787692H200.861538z" fill="#4d9cdd" p-id="6673"></path><path d="M200.861538 423.778462c-46.473846 0-84.283077 37.809231-84.283076 84.283076v314.289231c0 46.473846 37.809231 84.283077 84.283076 84.283077h72.467693V423.778462h-72.467693z" fill="#4d9cdd" p-id="6674"></path><path d="M273.329231 937.353846h-72.467693c-63.803077 0-115.790769-51.987692-115.790769-115.790769V507.273846c0-63.803077 51.987692-115.790769 115.790769-115.790769h72.467693c17.329231 0 31.507692 14.178462 31.507692 31.507692V905.846154c0 17.329231-14.178462 31.507692-31.507692 31.507692z m-72.467693-482.067692c-29.144615 0-52.775385 23.630769-52.775384 52.775384v314.289231c0 29.144615 23.630769 52.775385 52.775384 52.775385h40.96V455.286154h-40.96z" fill="#4d9cdd" p-id="6675"></path></svg>
                                                  </template>
                                              </div>

                                              <span style="padding-left: 5px; cursor: auto">
                                                  {{ item.likeCount }}
                                              </span>
                                              <span key="comment-basic-reply-to" class="replyBtn" @click="handleReply(item.commentId)">回复</span>

                                              <span key="comment-basic-del-reply" v-if="item.userId == userStore.userId" @click="delReply(item.commentId)" class="delReplyBtn">删除</span>
                                          </div>
                                          
                                      </template>
                                      <!-- 查看更多按钮 -->
                                      <div v-if="item.children.total > 0 && !item.showChildren" 
                                          style="cursor: pointer;color: #4d9cdd;margin-top: 10px;" 
                                          @click="addReply(item.commentId)">
                                        共{{item.children.total}}条回复，点击查看更多
                                      </div>
                                      <!-- 回复列表 -->
                                    <div v-if="item.showChildren && item.children?.records?.length > 0" 
                                          class="reply-list" >
                                      <a-list
                                        :data-source="item.children.records"
                                        item-layout="horizontal"
                                      >
                                        <template #renderItem="{ item: reply }">
                                          <transition-group name="reply">
                                            <a-comment 
                                                :id="`comment-${reply.commentId}`" 
                                                :class="{'highlight-comment': highlightedCommentId === reply.commentId}"
                                              >
                                            <template #author>
                                              <router-link 
                                                tag="a" 
                                                class="userName" 
                                                :to="{path:'/user/control/home',query: {userId: item.userId}}" 
                                                target="_blank"
                                              >
                                                {{item.username}}
                                              </router-link>
                                            </template>
                                            <template #avatar>
                                              <!-- 用户头像鼠标悬停气泡 -->
                                              <div class="avatarBox">
                                                <a-popover
                                                    trigger="hover"
                                                    placement="right"
                                                    @mouseenter="handleMouseEnter(item.userId)">
                                                    <template #content>
                                                        <div class="user-popover">
                                                            <a-spin :spinning="!userInfo[item.userId]" :indicator="indicator">
                                                                <div class="user-info" v-if="userInfo[item.userId]">
                                                                    <img :src="item.avatar" class="avatar"/>
                                                                    <div class="info">
                                                                        <div class="name">{{item.username}}</div>
                                                                        <div class="stats">
                                                                            <span>性别: {{userInfo[item.userId].sex=='1'?'男':'女' || '未填写'}}</span>
                                                                            <span>帖子: {{userInfo[item.userId].postsCount}}</span>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                                <div class="remark">{{userInfo[item.userId]?.email || '未绑定邮箱~'}}</div>
                                                                <div class="remark">{{userInfo[item.userId]?.remark || '这个人很懒,什么都没写~'}}</div>
                                                            </a-spin>
                                                        </div>
                                                    </template>
                                                    <router-link tag="a" 
                                                        v-if="item.username" 
                                                        class="avatarLink" 
                                                        :to="{path:'/user/control/home',query: {userId: item.userId}}" 
                                                        target="_blank">
                                                        <img :src="item.avatar" width="62" height="62" class="img"/>
                                                    </router-link>
                                                </a-popover>
                                              </div>
                                            </template>
                                              <template #datetime>
                                                <a-tooltip :title="reply.createTime">
                                                  <span>{{ reply.createTime }}</span>
                                                </a-tooltip>
                                              </template>
                                              <template #content>
                                                <p>{{ reply.content }}</p>
                                              </template>
                                              <template #actions>
                                                <div key="comment-basic-like" class="comment-like">
                                                <div @click="handleLike(reply.commentId,reply.likeFlag)">
                                                  <template v-if="!reply.likeFlag">
                                                      <svg t="1735046296972" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6672" width="15" height="15"><path d="M768 937.353846h-567.138462c-63.803077 0-115.790769-51.987692-115.790769-115.790769V507.273846c0-63.803077 51.987692-115.790769 115.790769-115.790769h117.366154c13.390769-5.513846 88.221538-42.535385 95.31077-241.033846 0-33.083077 24.418462-58.289231 60.652307-63.015385 58.289231-7.876923 133.907692 31.507692 154.387693 102.4 18.116923 64.590769 0 150.449231-14.178462 201.649231h208.738462c33.870769 0 66.166154 14.966154 88.221538 40.96 22.055385 25.993846 31.507692 60.652308 25.206154 94.523077l-55.138462 314.289231c-8.664615 55.926154-56.713846 96.098462-113.427692 96.098461z m-567.138462-482.067692c-29.144615 0-52.775385 23.630769-52.775384 52.775384v314.289231c0 29.144615 23.630769 52.775385 52.775384 52.775385h567.138462c25.993846 0 47.261538-18.116923 51.987692-43.323077l55.138462-314.289231c2.363077-15.753846-1.575385-30.72-11.815385-43.323077-10.24-11.815385-24.418462-18.904615-40.172307-18.904615h-252.061539c-10.24 0-19.692308-4.726154-25.993846-13.390769-5.513846-8.664615-7.089231-19.692308-3.938462-29.144616 13.390769-35.446154 44.110769-141.784615 25.993847-204.8-8.664615-29.932308-35.446154-48.049231-57.501539-54.350769-18.116923-5.513846-30.72-3.150769-34.658461-1.575385v0.787693c-8.664615 268.603077-133.907692 299.323077-148.086154 301.686154-1.575385 0-3.938462 0.787692-5.513846 0.787692H200.861538z" fill="#2c2c2c" p-id="6673"></path><path d="M200.861538 423.778462c-46.473846 0-84.283077 37.809231-84.283076 84.283076v314.289231c0 46.473846 37.809231 84.283077 84.283076 84.283077h72.467693V423.778462h-72.467693z" fill="#2c2c2c" p-id="6674"></path><path d="M273.329231 937.353846h-72.467693c-63.803077 0-115.790769-51.987692-115.790769-115.790769V507.273846c0-63.803077 51.987692-115.790769 115.790769-115.790769h72.467693c17.329231 0 31.507692 14.178462 31.507692 31.507692V905.846154c0 17.329231-14.178462 31.507692-31.507692 31.507692z m-72.467693-482.067692c-29.144615 0-52.775385 23.630769-52.775384 52.775384v314.289231c0 29.144615 23.630769 52.775385 52.775384 52.775385h40.96V455.286154h-40.96z" fill="#2c2c2c" p-id="6675"></path></svg>
                                                  </template>
                                                  <template v-else>
                                                      <svg t="1735046296972" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6672" width="15" height="15"><path d="M768 937.353846h-567.138462c-63.803077 0-115.790769-51.987692-115.790769-115.790769V507.273846c0-63.803077 51.987692-115.790769 115.790769-115.790769h117.366154c13.390769-5.513846 88.221538-42.535385 95.31077-241.033846 0-33.083077 24.418462-58.289231 60.652307-63.015385 58.289231-7.876923 133.907692 31.507692 154.387693 102.4 18.116923 64.590769 0 150.449231-14.178462 201.649231h208.738462c33.870769 0 66.166154 14.966154 88.221538 40.96 22.055385 25.993846 31.507692 60.652308 25.206154 94.523077l-55.138462 314.289231c-8.664615 55.926154-56.713846 96.098462-113.427692 96.098461z m-567.138462-482.067692c-29.144615 0-52.775385 23.630769-52.775384 52.775384v314.289231c0 29.144615 23.630769 52.775385 52.775384 52.775385h567.138462c25.993846 0 47.261538-18.116923 51.987692-43.323077l55.138462-314.289231c2.363077-15.753846-1.575385-30.72-11.815385-43.323077-10.24-11.815385-24.418462-18.904615-40.172307-18.904615h-252.061539c-10.24 0-19.692308-4.726154-25.993846-13.390769-5.513846-8.664615-7.089231-19.692308-3.938462-29.144616 13.390769-35.446154 44.110769-141.784615 25.993847-204.8-8.664615-29.932308-35.446154-48.049231-57.501539-54.350769-18.116923-5.513846-30.72-3.150769-34.658461-1.575385v0.787693c-8.664615 268.603077-133.907692 299.323077-148.086154 301.686154-1.575385 0-3.938462 0.787692-5.513846 0.787692H200.861538z" fill="#4d9cdd" p-id="6673"></path><path d="M200.861538 423.778462c-46.473846 0-84.283077 37.809231-84.283076 84.283076v314.289231c0 46.473846 37.809231 84.283077 84.283076 84.283077h72.467693V423.778462h-72.467693z" fill="#4d9cdd" p-id="6674"></path><path d="M273.329231 937.353846h-72.467693c-63.803077 0-115.790769-51.987692-115.790769-115.790769V507.273846c0-63.803077 51.987692-115.790769 115.790769-115.790769h72.467693c17.329231 0 31.507692 14.178462 31.507692 31.507692V905.846154c0 17.329231-14.178462 31.507692-31.507692 31.507692z m-72.467693-482.067692c-29.144615 0-52.775385 23.630769-52.775384 52.775384v314.289231c0 29.144615 23.630769 52.775385 52.775384 52.775385h40.96V455.286154h-40.96z" fill="#4d9cdd" p-id="6675"></path></svg>
                                                  </template>
                                                  </div>

                                                  <span style="padding-left: 5px; cursor: auto">
                                                      {{ reply.likeCount }}
                                                  </span>
                                                  <span key="comment-basic-reply-to" @click="handleReply(reply.commentId)" class="replyBtn">回复</span>
                                                  
                                                  <span key="comment-basic-del-reply" v-if="reply.userId == userStore.userId" @click="delReply(reply.commentId)" class="delReplyBtn">删除</span>
                                                </div>
                                              </template>
                                            </a-comment>
                                          </transition-group>
                                        </template>
                                      </a-list>

                                      <div class="pagination-container">
                                        <a-pagination
                                          v-model:current="item.replyPage"
                                          :total="item.children.total"
                                          :pageSize="10"
                                          show-less-items
                                          size="small"
                                          @change="(page) => handleReplyPageChange(page, item)"
                                        />
                                      </div>
                                    </div>
                                    <!-- 回复框 -->
                                    <div v-if="item.showReply" 
                                            class="reply-input-box"
                                            :id="`reply-box-${item.commentId}`">
                                          <a-textarea 
                                            :bordered="false"
                                            style="background-color: #F3F4F6; max-height: 200px; overflow: hidden;"
                                            :placeholder="`回复 ${item.username}:`"
                                            v-model:value="item.replyContent"
                                            :ref="el => { if(el) replyTextareas[item.commentId] = el }" 
                                            autosize 
                                          />
                                          <div class="reply-footer">
                                            <a-space :size="8">
                                              <V3Emoji @click-emoji="(val) => onReplyEmoji(val, item)">
                                                <a-button type="text">
                                                  <template #icon><SmileOutlined /></template>
                                                  表情
                                                </a-button>
                                              </V3Emoji>
                                            </a-space>
                                            <a-space>
                                              <a-button @click="cancelReply(item)">取消</a-button>
                                              <a-button type="primary" @click="submitReply(item)" :loading="item.submitting">
                                                发布
                                              </a-button>
                                            </a-space>
                                          </div>
                                      </div>

                                    </a-comment>
                                  </a-list-item>
                                </transition-group>
                              </template>

                            </a-list>
                            <a-empty v-show="commentListData.length <= 0">
                              <template #description>
                                <span>
                                  暂无内容
                                </span>
                              </template>
                            </a-empty>
                          </a-tab-pane>
                        </a-tabs>
                      </div>
                </div>
            </a-col>
            <!-- 热门贴子排行 -->
            <a-col :span="6" style="padding-left: 10px;" class="left-container">
                <div class="container1">
                    <a-scrollbar :style="{ maxHeight: state.tagScrollbarMaxHeight, transition: 'max-height 0.3s ease 0s' }">
                        <div class="item">
                          <router-link tag="a" to="/social/hot" class="title" :class="router.currentRoute.value.query.tagId == undefined || router.currentRoute.value.query.tagId == '' ? 'active' :''">
                            <div class="svg-container">
                               <svg t="1734709397397" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7747"><path d="M536.796756 350.460884c-15.129582 0-27.129894 8.216125-35.993772 24.647353-9.914814 18.779715-14.866592 53.598732-14.866592 104.46012 0 50.603515 4.694929 85.424578 14.084787 104.46012 8.081049 16.432251 20.344351 24.647353 36.775578 24.647353 16.95209 0 29.080316-8.215102 36.385698-24.647353 9.645684-19.561521 14.475689-54.382585 14.475689-104.46012-0.264013-51.117215-5.220908-86.200244-14.867616-105.241926C564.440349 358.420159 552.446177 350.460884 536.796756 350.460884z" fill="#ff5930" p-id="7748"></path><path d="M805.411563 231.911884 245.670236 231.911884c-48.060599 0-87.020936 38.960337-87.020936 87.020936l0 307.98242c0 48.060599 38.960337 87.020936 87.020936 87.020936l559.741327 0c48.060599 0 87.020936-38.960337 87.020936-87.020936L892.432499 318.933843C892.432499 270.873244 853.471139 231.911884 805.411563 231.911884zM420.209434 463.136106l0 32.863479L420.209434 625.107057c0 10.954493-5.477758 16.432251-16.432251 16.432251s-16.432251-5.477758-16.432251-16.432251L387.344932 495.999584l-101.720729 0L285.624203 625.107057c0 10.954493-5.477758 16.432251-16.432251 16.432251s-16.432251-5.477758-16.432251-16.432251L252.759701 495.999584l0-32.863479L252.759701 334.028633c0-10.954493 5.477758-16.432251 16.432251-16.432251 10.954493 0 16.432251 5.477758 16.432251 16.432251l0 129.107473 101.720729 0L387.344932 334.028633c0-10.954493 5.477758-16.432251 16.432251-16.432251s16.432251 5.477758 16.432251 16.432251L420.209434 463.136106zM600.959078 603.589998c-13.826913 25.302269-35.20992 37.94931-64.162322 37.94931-28.16855-0.26299-48.647977-11.865235-61.423955-34.819017-14.866592-25.039279-22.299889-67.421552-22.299889-127.151935 0-61.289901 7.042393-102.631472 21.12718-124.021641 16.689101-25.296129 37.558407-37.94931 62.597687-37.94931 28.16855 0.26299 49.816592 13.045107 64.946174 38.341237 12.519128 21.908986 18.779715 63.123666 18.779715 123.629715C620.258633 539.561729 613.737102 580.898183 600.959078 603.589998zM804.40156 350.460884l-50.860365 0L753.541195 625.107057c0 10.954493-5.477758 16.432251-16.432251 16.432251s-16.432251-5.477758-16.432251-16.432251L720.676693 350.460884 669.816329 350.460884c-10.954493 0-16.432251-5.477758-16.432251-16.432251s5.477758-16.432251 16.432251-16.432251l50.860365 0 32.863479 0 50.860365 0c10.954493 0 16.432251 5.477758 16.432251 16.432251S815.356053 350.460884 804.40156 350.460884z" fill="#ff5930" p-id="7749"></path></svg>
                               <div class="text">热门帖子</div>
                            </div>
                            <div class="more" @click="openHotPosts">更多</div>
                            </router-link>            
                        </div>
                        
                        <div class="item" v-for="hot in filteredHotList" :key="hot.postId">
                          <a-tooltip :title="hot.name" placement="right" :disabled="tagTooltipDisabled">
                              <router-link 
                                  tag="a" 
                                  :to="{path: '/social/detail', query:{ postId : hot.postId}}" 
                                  class="title" 
                                  :class="router.currentRoute.value.query.postId == hot.postId ? 'active' :''">
                                  <div class="text cell">{{hot.title}}</div>
                                  <!-- 添加热度显示 -->
                                  <div class="heat">
                                      <span>{{hot.viewCount || 0}}</span>
                                      <span class="heat-text">热度</span>
                                  </div>
                              </router-link>
                          </a-tooltip>
                      </div>
                    </a-scrollbar>
                </div>
            </a-col>
        </a-row>
    </div>
    
</template>

<script setup lang="ts">
import { postsDetails,hotList } from '@/api/front/social';
import { useRoute,useRouter } from 'vue-router';
import DOMPurify from 'dompurify';
import useSocialStore from '@/store/modules/social';
import { commentPush,commentList } from '@/api/front/comment';
import V3Emoji from "vue3-emoji";
import "vue3-emoji/dist/style.css";
import { CommentSocialVo } from '@/api/front/comment/types';
import useUserStore from "@/store/modules/user";
import { message as AntdMessage } from 'ant-design-vue';
import { debounce } from 'lodash';
import { likeComment } from '@/api/front/like';
import { LoadingOutlined } from '@ant-design/icons-vue';
import { getUserProfile } from '@/api/front/user';
import { likePosts } from '@/api/front/like';
import { collectPosts } from '@/api/front/collect';
import { commentDelete } from '@/api/front/comment';
import { Modal } from 'ant-design-vue';

const socialStore = useSocialStore();
const userStore = useUserStore();
const activeKey = ref('comment')
const postId = ref<string>('');
const route = useRoute();
const router = useRouter();

const tagTooltipDisabled = ref<boolean>(true);

const postsDetailsData = ref<any>([]);

const hotListData = ref<any[]>([]);

// 评论值
const commentValue = ref('')
// 发布按钮loading
const submitting = ref(false)
const total = ref()
const rating = ref(0)
// 初始化数据loading
const initLoading = ref(true);
// 加载跟多的按钮loading
const loading = ref(false);
// 评论排序条件
const ratingAndCreatedBtn = ref('create_time')


const pageQuery = reactive({
    pageQuery: {
        pageSize: 10,
        pageNum: 1,
        orderByColumn: 'create_time',
        isAsc: 'desc',
    },
    targetId: socialStore.social.postId,
    parentId: 0
})

const state = reactive({
        tagId:'' as string,
        
        loading:true,//是否显示骨架屏
        isShowPage:false,//是否显示分页

        tagScrollbarMaxHeight:"calc(10vh - 186px)",
});

const userInfo = ref<Record<string, any>>({});

// 加载指示器
const indicator = h(LoadingOutlined, {
  style: {
    fontSize: '24px',
  },
  spin: true,
});
//删除回复
const delReply = async (commentId: number) => {
  try {
    Modal.confirm({
      title: '确认删除',
      content: '确定要删除这条评论吗？删除后将无法恢复。',
      okText: '确认',
      cancelText: '取消',
      okButtonProps: {
        danger: true
      },
      async onOk() {
        const hide = AntdMessage.loading('正在删除...', 0);
        
        try {
          const res = await commentDelete({commentId});
          
          if (res.code == 200) {
            // 找到要删除的评论
            const isMainComment = commentListData.value.some(c => c.commentId === commentId);
            
            if (isMainComment) {
              // 如果是主评论，直接从列表中移除
              commentListData.value = commentListData.value.filter(c => c.commentId !== commentId);
            } else {
              // 如果是回复，找到父评论并从其回复列表中移除
              const parentComment = commentListData.value.find(comment => 
                comment.children?.records?.some(reply => reply.commentId === commentId)
              );
              
              if (parentComment && parentComment.children) {
                parentComment.children.records = parentComment.children.records.filter(
                  reply => reply.commentId !== commentId
                );
                // 更新总数
                parentComment.children.total--;
              }
            }
            
            // 等待动画完成后再显示成功消息
            setTimeout(() => {
              AntdMessage.success('删除成功');
              hide();
            }, 500);
            
          } else {
            hide();
            AntdMessage.error(res.msg || '删除失败');
          }
        } catch (error) {
          hide();
          console.error('删除评论失败:', error);
          AntdMessage.error('删除评论失败，请重试');
        }
      }
    });
  } catch (error) {
    console.error('删除评论失败:', error);
    AntdMessage.error('删除评论失败，请重试');
  }
};
//打开热门帖子
const openHotPosts = () => {
    const routeData = {
        path: '/social/hot'
    };
    const routeUrl = router.resolve(routeData);
    window.open(routeUrl.href, '_blank');
};
//路由监听，刷新数据
watch(
  () => route.query.postId,
  (newPostId, oldPostId) => {
    if (newPostId && newPostId !== oldPostId) {
      getPostDetails(); // 重新获取帖子详情
    }
  }
);
//热门帖子点击
const handleHotClick = (postId: string) => {
  // 可以添加一些点击时的逻辑，比如滚动到顶部
  window.scrollTo({
    top: 0,
    behavior: 'smooth'
  });
}
//消息列表跳转到当前页定位评论
const highlightedCommentId = ref(null);
const scrollToComment = async(commentId) => {
  if(!commentId) return;
  
  const parentId = route.query.parentId;
  
  try {
    // 设置高亮的评论ID
    highlightedCommentId.value = Number(commentId);

    if (parentId) {
      // 如果有父评论ID，先展开父评论的回复列表
      await addReply(Number(parentId));
      
      // 等待子评论加载完成
      await nextTick();
    }
    
    // 等待DOM更新后滚动到目标评论
    await nextTick();
    
    const element = document.getElementById(`comment-${commentId}`);
    if (element) {
      element.scrollIntoView({ behavior: 'smooth', block: 'center' });
      
      // 3秒后取消高亮
      setTimeout(() => {
        highlightedCommentId.value = null;
      }, 3000);
    }
  } catch (error) {
    console.error('Error scrolling to comment:', error);
  }
};

// 处理鼠标悬停获取用户信息
const debouncedHandleMouseEnter = debounce(async (userId: string) => {
  if (userInfo.value[userId]) {
    return;
  }
  try {
    const res = await getUserProfile({userId}, {
      repeatSubmit: false,
      showProgress: false
    });
    if (res.code === 200) {
      userInfo.value[userId] = res.data;
    }
  } catch (error) {
    console.error('获取用户信息失败:', error);
  }
}, 100);

// 鼠标悬停处理函数
const handleMouseEnter = (userId: string) => {
  debouncedHandleMouseEnter(userId);
};

const handleOrder = async () => {
  // pageQuery重新赋值
  pageQuery.pageQuery.pageSize = 10
  pageQuery.pageQuery.pageNum = 1
  await getCommentList()
}
//过滤热门帖子
const filteredHotList = computed(() => {
   return hotListData.value
       .filter(item => item.title) // 过滤掉没有title的数据
       .slice(0, 10); // 只取前10条数据
});

const handleReplyPageChange = async (page: number, comment: any) => {
  try {
    await loadReplyPage(comment, page);
  } catch (error) {
    console.error('Failed to change reply page:', error);
    AntdMessage.error('加载回复失败，请重试');
  }
};

const loadReplyPage = async (comment: any, page: number) => {
  const params = {
    pageQuery: {
      pageSize: 10,
      pageNum: page,
      orderByColumn: 'create_time',
      isAsc: 'desc',
    },
    targetId: postsDetailsData.value.postId,
    parentId: comment.commentId
  };

  const res = await commentList(params);
  
  comment.children = {
    ...res.data,
    records: res.data.records.map(reply => ({
      ...reply,
      showReply: false,
      replyContent: ''
    }))
  };
};
//加载更多评论
const addReply = async (commentId: number) => {
  try {
    const index = commentListData.value.findIndex(item => item.commentId === commentId);
    if (index === -1) return;
    
    // 初始化分页相关属性
    commentListData.value[index] = {
      ...commentListData.value[index],
      replyPage: 1,
      showChildren: true
    };

    await loadReplyPage(commentListData.value[index], 1);
  } catch (error) {
    console.error('Failed to load replies:', error);
    AntdMessage.error('加载回复失败，请重试');
  }
};
//回复评论
const commentListData = ref<Array<CommentSocialVo>>([])

//回复框的引用
const replyTextareas = ref<{ [key: number]: any }>({});
// 回复评论handle方法
const handleReply = async (commentId: number) => {
 // 先查找主评论
 const parentIndex = commentListData.value.findIndex(item => item.commentId === commentId);
 
 if (parentIndex > -1) {
   // 如果是主评论
   commentListData.value[parentIndex] = {
     ...commentListData.value[parentIndex],
     showReply: !commentListData.value[parentIndex].showReply
   };
   
   // 等待 DOM 更新
   await nextTick();
   
   // 如果显示了回复框，滚动到回复框位置并聚焦
   if (commentListData.value[parentIndex].showReply) {
     const replyBox = document.querySelector(`#reply-box-${commentId}`);
     if (replyBox) {
       replyBox.scrollIntoView({ 
         behavior: 'smooth',
         block: 'center'
       });
       
       // 等待滚动完成后聚焦
       setTimeout(() => {
         const textarea = replyTextareas.value[commentId];
         if (textarea) {
           textarea.focus();
         }
       }, 500); // 给滚动动画一些时间完成
     }
   }
 } else {
   // 如果是子评论的处理逻辑...
   for (let i = 0; i < commentListData.value.length; i++) {
     if (commentListData.value[i].children?.records) {
       const replyIndex = commentListData.value[i].children.records.findIndex(
         reply => reply.commentId === commentId
       );
       
       if (replyIndex > -1) {
         const parentCommentId = commentListData.value[i].commentId;
         commentListData.value[i] = {
           ...commentListData.value[i],
           showReply: !commentListData.value[i].showReply,
           replyToComment: commentListData.value[i].children.records[replyIndex]
         };
         
         // 等待 DOM 更新
         await nextTick();
         
         // 如果显示了回复框，滚动到回复框位置并聚焦
         if (commentListData.value[i].showReply) {
           const replyBox = document.querySelector(`#reply-box-${parentCommentId}`);
           if (replyBox) {
             replyBox.scrollIntoView({ 
               behavior: 'smooth',
               block: 'center'
             });
             
             // 等待滚动完成后聚焦
             setTimeout(() => {
               const textarea = replyTextareas.value[parentCommentId];
               if (textarea) {
                 textarea.focus();
               }
             }, 500);
           }
         }
         break;
       }
     }
   }
 }
}
// 取消回复
const cancelReply = (comment) => {
 comment.showReply = false;
 comment.replyContent = '';
}
// 回复中添加表情
const onReplyEmoji = (val, comment) => {
 comment.replyContent = (comment.replyContent || '') + val;
}
// 提交回复
const submitReply = async (comment) => {

 // 检查用户是否登录
 const isLoggedIn = await userStore.isLoggedIn()
 if (!isLoggedIn) {
   AntdMessage.warning('请先登录');
   return;
 }
  // 检查回复内容
 if (!comment.replyContent?.trim()) {
   AntdMessage.warning('回复内容不能为空');
   return;
 }
  comment.submitting = true;
 try {
   const formData = {
        targetId: socialStore.social.postId,
        replyUserId: socialStore.social.userId,
        content: comment.replyContent,
        parentId: comment.commentId,
        replyContent: comment.content
    };
   
   await commentPush(formData);
   
   // 刷新评论列表
   await getCommentList();
   AntdMessage.success('回复成功');
   
   // 清空并隐藏回复框
   comment.showReply = false;
   comment.replyContent = '';
 } catch (error) {
   console.error('Failed to submit reply:', error);
   AntdMessage.error('回复失败，请重试');
 } finally {
   comment.submitting = false;
 }
}
// 点赞帖子的防抖处理
const debouncedLikePost = debounce(async (postId: string, userId: string, isLike: boolean) => {
  try {
    const params = {
      type: isLike ? 'unlike' : 'like',
      authorId: userId,
      postsId: postId
    }
    const headers = {
      repeatSubmit: false,
      showProgress: false
    }
    const res = await likePosts(params, headers);
    
    if (res.code !== 200) {
      // 如果请求失败，回滚UI更新
      if (postsDetailsData.value) {
        postsDetailsData.value.likeFlag = isLike;
        postsDetailsData.value.likeCount = isLike ? 
          postsDetailsData.value.likeCount + 1 : 
          postsDetailsData.value.likeCount - 1;
      }
      AntdMessage.error('操作失败，请重试');
    }
  } catch (error) {
    // 发生错误时也回滚UI更新
    if (postsDetailsData.value) {
      postsDetailsData.value.likeFlag = isLike;
      postsDetailsData.value.likeCount = isLike ? 
        postsDetailsData.value.likeCount + 1 : 
        postsDetailsData.value.likeCount - 1;
    }
    AntdMessage.error('操作失败，请重试');
  }
}, 2000);

// 收藏帖子的防抖处理
const debouncedCollect = debounce(async (postId: string, userId: string, isCollect: boolean) => {
  try {
    const params = {
      type: isCollect ? 'uncollect' : 'collect',
      authorId: userId,
      postsId: postId
    }
    const headers = {
      repeatSubmit: false,
      showProgress: false
    }
    const res = await collectPosts(params, headers);
    
    if (res.code !== 200) {
      // 如果请求失败，回滚UI更新
      if (postsDetailsData.value) {
        postsDetailsData.value.collectFlag = isCollect;
        postsDetailsData.value.collectCount = isCollect ? 
          postsDetailsData.value.collectCount + 1 : 
          postsDetailsData.value.collectCount - 1;
      }
      AntdMessage.error('操作失败，请重试');
    }
  } catch (error) {
    // 发生错误时也回滚UI更新
    if (postsDetailsData.value) {
      postsDetailsData.value.collectFlag = isCollect;
      postsDetailsData.value.collectCount = isCollect ? 
        postsDetailsData.value.collectCount + 1 : 
        postsDetailsData.value.collectCount - 1;
    }
    AntdMessage.error('操作失败，请重试');
  }
}, 2000);

// 点赞帖子的处理函数
const handleLikePost = (postId: string, userId: string, isLike: boolean) => {
  // 先更新UI
  if (postsDetailsData.value) {
    postsDetailsData.value.likeFlag = !isLike;
    postsDetailsData.value.likeCount = isLike ? 
      postsDetailsData.value.likeCount - 1 : 
      postsDetailsData.value.likeCount + 1;
  }
  
  // 调用防抖的API请求
  debouncedLikePost(postId, userId, isLike);
}

// 收藏帖子的处理函数
const handleCollectPost = (postId: string, userId: string, isCollect: boolean) => {
  // 先更新UI
  if (postsDetailsData.value) {
    postsDetailsData.value.collectFlag = !isCollect;
    postsDetailsData.value.collectCount = isCollect ? 
      postsDetailsData.value.collectCount - 1 : 
      postsDetailsData.value.collectCount + 1;
  }
  
  // 调用防抖的API请求
  debouncedCollect(postId, userId, isCollect);
}
//点赞评论
const debouncedLike = debounce(async (commentId: number, isLike: boolean) => {
  try {
    const params = {
      type: isLike ? 'unlike' : 'like',
      commentId: commentId
    }
    const headers = {
      repeatSubmit: false,
      showProgress: false
    }
    const res = await likeComment(params, headers);
    
    if (res.code !== 200) {
      // 如果请求失败，回滚UI更新
      const rollbackLike = (comments) => {
        for (let comment of comments) {
          if (comment.commentId === commentId) {
            comment.likeFlag = isLike;
            comment.likeCount = isLike ? 
              comment.likeCount + 1 : 
              comment.likeCount - 1;
            return true;
          }
          // 检查子评论
          if (comment.children?.records) {
            const found = comment.children.records.find(reply => reply.commentId === commentId);
            if (found) {
              found.likeFlag = isLike;
              found.likeCount = isLike ? 
                found.likeCount + 1 : 
                found.likeCount - 1;
              return true;
            }
          }
        }
        return false;
      };

      rollbackLike(commentListData.value);
      AntdMessage.error('操作失败，请重试');
    }
  } catch (error) {
    // 发生错误时也回滚UI更新
    const rollbackLike = (comments) => {
      for (let comment of comments) {
        if (comment.commentId === commentId) {
          comment.likeFlag = isLike;
          comment.likeCount = isLike ? 
            comment.likeCount + 1 : 
            comment.likeCount - 1;
          return true;
        }
        // 检查子评论
        if (comment.children?.records) {
          const found = comment.children.records.find(reply => reply.commentId === commentId);
          if (found) {
            found.likeFlag = isLike;
            found.likeCount = isLike ? 
              found.likeCount + 1 : 
              found.likeCount - 1;
            return true;
          }
        }
      }
      return false;
    };

    rollbackLike(commentListData.value);
    AntdMessage.error('操作失败，请重试');
  }
}, 2000);
const handleLike = async (commentId: number, isLike: boolean) => {
  // 查找评论（包括子评论）并更新
  const updateCommentLike = (comments) => {
    for (let comment of comments) {
      if (comment.commentId === commentId) {
        comment.likeFlag = !isLike;
        comment.likeCount = isLike ? 
          comment.likeCount - 1 : 
          comment.likeCount + 1;
        return true;
      }
      // 检查子评论
      if (comment.children?.records) {
        const found = comment.children.records.find(reply => reply.commentId === commentId);
        if (found) {
          found.likeFlag = !isLike;
          found.likeCount = isLike ? 
            found.likeCount - 1 : 
            found.likeCount + 1;
          return true;
        }
      }
    }
    return false;
  };

  // 更新UI
  updateCommentLike(commentListData.value);
  
  // 调用防抖的API请求
  debouncedLike(commentId, isLike);
}
//发布
const handleSubmit = async () => {
  // 检查用户是否登录
  const isLoggedIn = await userStore.isLoggedIn()
  if (!isLoggedIn) {
    AntdMessage.warning('请先登录');
    return;
  }

  // 校验 commentValue 是否为空字符串
  if (!commentValue.value || commentValue.value.trim() === '') {
    AntdMessage.warning('评论内容不能为空');
    return;
  }

  submitting.value = true;
  try {
    const formData = {
        targetId: socialStore.social.postId,
        replyUserId: socialStore.social.userId,
        content: commentValue.value
    };
    console.log(formData);
    
    const res = await commentPush(formData);
    console.log(res);
    // 刷新评论列表
    await getCommentList();
    rating.value = 0;
    commentValue.value = '';
    AntdMessage.success('发布成功');
  } finally {
    submitting.value = false;
  }
}
//加载更多
const onLoadingMore = async () => {
  // 检查是否还有更多数据可以加载
  if (pageQuery.pageQuery.pageNum >= Math.ceil(total.value / pageQuery.pageQuery.pageSize)) {
    AntdMessage.info('没有更多评论了');
    return;
  }

  try {
    loading.value = true;
    pageQuery.pageQuery.pageNum++;

    const params = {
      pageQuery: {
        pageSize: pageQuery.pageQuery.pageSize,
        pageNum: pageQuery.pageQuery.pageNum,
        orderByColumn: ratingAndCreatedBtn.value,
        isAsc: 'desc',
      },
      targetId: postsDetailsData.value.postId,
      parentId: 0
    };

    const listRes = await commentList(params);
    
    if (listRes.data?.records) {
      // 为新加载的评论添加必要的字段
      const newComments = listRes.data.records.map(comment => ({
        ...comment,
        showReply: false,
        replyContent: '',
        children: { ...comment.children, records: [] }
      }));
      
      // 追加新评论到列表
      commentListData.value.push(...newComments);
      total.value = listRes.data.total;
    }
  } catch (error) {
    console.error('Failed to load more comments:', error);
    AntdMessage.error('加载更多评论失败，请重试');
    // 发生错误时恢复页码
    pageQuery.pageQuery.pageNum--;
  } finally {
    loading.value = false;
  }
};
/*
Emoji表情
 */
 const onVue3Emoji = (val) => {
  commentValue.value += val;
};
const sanitizeHtml=(content)=> {  
    return DOMPurify.sanitize(content);  
}

//获取评论列表
const getCommentList = async () => {
  // 使用 postsDetailsData.value.postId 而不是 postsId
  const params = {
      pageQuery: {
          pageSize: pageQuery.pageQuery.pageSize,
          pageNum: pageQuery.pageQuery.pageNum,
          orderByColumn: ratingAndCreatedBtn.value, // 使用当前选择的排序方式
          isAsc: 'desc',
      },
      targetId: postsDetailsData.value.postId,
      parentId: 0
  };
   try {
      const listRes = await commentList(params);
      // 每条评论添加 showReply 字段
      const commentsWithReplyState = listRes.data.records.map(comment => ({
          ...comment,
          showReply: false,
          replyContent: ''
      }));
      commentListData.value = commentsWithReplyState;
      total.value = listRes.data.total;
  } catch (error) {
      console.error('获取评论列表失败:', error);
      AntdMessage.error('获取评论列表失败');
  }
}

const getPostDetails = async () => {
   postId.value = route.query.postId as string;
   try {
      const res1 = await postsDetails(postId.value);
      socialStore.setSocial(res1.data);
      postsDetailsData.value = res1.data;
      
      const params = {
         pageQuery: {
             pageSize: 10,
             pageNum: 1,
             orderByColumn: 'create_time',
             isAsc: 'desc',
         },
         targetId: postId.value,
         parentId: 0
      }
      
      // 并行获取其他数据
      const [res2, res3] = await Promise.all([  
          hotList(),
          commentList(params)
      ]);
      
      hotListData.value = res2.data;
      // 为每条评论添加 showReply 字段
      commentListData.value = res3.data.records.map(comment => ({
          ...comment,
          showReply: false,
          replyContent: ''
      }));
      total.value = res3.data.total;

      // console.log(commentListData.value);
      
      // 在所有数据加载完成后执行滚动定位
      nextTick(() => {
        if(route.query.commentId) {
            scrollToComment(route.query.commentId);
        }
      });

      state.loading = false;
  } catch(error) {
      console.error('Failed to initialize data:', error);
      AntdMessage.error('初始化数据失败，请重试');
  } finally {
    
      initLoading.value = false;
  }
} 

onMounted(() => {
    getPostDetails();
}); 
</script>

<style lang="scss" scoped>

.comment-move, 
.comment-enter-active,
.comment-leave-active {
  transition: all 0.5s ease;
}

.comment-enter-from,
.comment-leave-to {
  opacity: 0;
  transform: translateY(30px);
}

.comment-leave-active {
  position: absolute;
  width: 100%;
}

// 子评论的动画
.reply-move,
.reply-enter-active,
.reply-leave-active {
  transition: all 0.5s ease;
}

.reply-enter-from,
.reply-leave-to {
  opacity: 0;
  transform: translateY(30px);
}

.reply-leave-active {
  position: absolute;
  width: 100%;
}

.icon-wrapper {
  display: inline-block;
  transition: transform 0.2s;
}

.icon-wrapper:active {
  transform: scale(1.3);
}
:deep(.ant-comment-content) {
  transition: background-color 1s linear;
}
:deep(.ant-comment) {
  transition: background-color 1s linear;
}
//高亮样式
.highlight-comment {
  background-color: rgba(77, 156, 221, 0.1);
}
// 添加用户悬浮框样式
.user-popover {
  width: 300px;
  padding: 12px;
  
  .user-info {
      display: flex;
      align-items: center;
      margin-bottom: 12px;
      
      .avatar {
          width: 48px;
          height: 48px;
          border-radius: 50%;
          margin-right: 12px;
      }
      
      .info {
          .name {
              font-size: 16px;
              font-weight: 500;
              color: #272e3b;
              margin-bottom: 4px;
          }
          
          .stats {
              color: #86909c;
              font-size: 14px;
              
              span {
                  margin-right: 12px;
              }
          }
      }
  }
  
  .remark {
      color: #86909c;
      font-size: 14px;
      line-height: 1.5;
  }
}
.reply-list {
    background-color: #fafafa;
    border-radius: 4px;
    padding: 8px 16px;
    margin-left: 32px;
    margin-top: 10px;
    :deep(.ant-comment) {
      padding: 8px 0;
    }
}
:deep(.tippy-content) {
    padding: 0px;
    width: 0px;
}   
.comment-list {
     :deep(.ant-list-items) {
      width: 100%;
      display: flex;
      flex-direction: column;
      
      .ant-list-item {
        width: 100%;
        margin: 0;
        box-sizing: border-box;
        display: block;
      }
    }
}
.reply-input-box {
    width: 100%;
    padding: 15px;
    background-color: white;
    border-radius: 8px;
    box-shadow: 0 0 6px rgb(238, 238, 238);
     .reply-footer {
      margin-top: 12px;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
}
.comment-like{
    display: flex;
    align-items: center;
    justify-content: center;
    svg{
        cursor: pointer;
    }
    div{
            vertical-align: middle;
            margin: 0;
            margin-left: 4px;
            line-height: 1;
            color: #2c2c2c;
    }
}
.replyBtn{
    vertical-align: middle;
    margin: 0;
    margin-left: 20px;
    line-height: 1;
    color: #2c2c2c;
    cursor: pointer;
}
.delReplyBtn{
  vertical-align: middle;
    margin: 0;
    margin-left: 20px;
    line-height: 1;
    color: #d64747;
    cursor: pointer;
}
.comment-txt-box {
    padding: 15px;
    background-color: white;
    border-radius: .5rem;
  
    .comment-txt-footer {
      display: flex;
      justify-content: space-between;
      align-content: center;
      align-items: center;
    }
  }
  
  .comment-list {
    width: 100% !important;
    .rating {
      display: flex;
      align-items: center;
  
      span {
        margin-right: 5px;
      }
    }
  }
  .fish-site-comment-box {
    padding: 20px;
  }
.mainContent{
    .serviceNav {

        height: 66px;
        font-size: 15px;
        border-radius: 5px;
        padding: 0;
        display: flex;
        border-bottom: 1px solid #f2f3f5;
        ul{
            padding: 0;
        }
        .title {
            list-style: none;
            padding: 0 25px;
            height: 66px;
            line-height: 66px;
            cursor: pointer;
            position: relative;
            display: flex;
        }
        .active {
            cursor: pointer;
            p{
                color: #c2197b;
                border-bottom: 2px solid #c2197b;
                height: 56px;
            }   
        }
        .more{
            color: #86909c;
            .icom{
                margin-left: 5px;
                position: relative;
                top: 3px;
            }
        }
    }
}
.left-container{
    .container1{
        background: #fff;
        padding: 8px 0px 8px 0px;
        box-sizing: border-box;
        border-radius: 10px;
        box-shadow: 0 0px 3px 0 rgba(0,0,0,.02), 0 4px 8px 0 rgba(0,0,0,.02);
        transition: top 0.3s ease 0s;
        height: fit-content;
        min-height: 100px;
    }
    .item{
        display: block;
        margin-bottom: 2px;
        padding: 0px 8px 0px 8px;
        &:nth-child(1) a{
            display: flex;
            justify-content: space-between;
        }
        .title{
            padding: 0 12px;
            color: #4e5969;
            border-radius: 4px;
            display: flex;
            align-items: center;
            height: 44px;
            
            font-size: 16px;
            transition: color .3s;
            .text{
                overflow:hidden;
                text-overflow:ellipsis; 
                white-space:nowrap;
            }

            .more{
                color: #4d9cdd;
                font-size: 14px;
                cursor: pointer;
            }   
            
            .svg-container{
                display: flex;
                align-items: center;
                svg {
                    margin-right: 10px;
                    width: 30px;
                    height: 30px;
                }
            }
            .image-container{
                position: relative;
                top: 2px;
                .el-image{
                    margin-right: 10px;
                }
            }
            &:hover {
                color: #272e3b;
                background: #f7f8fa;
            }

            &:hover svg {
                fill: #6b7785;
            }
        }
        .mouse{
            cursor:default;
            &:hover {
                color: #272e3b;
                background: #fff;
            }

            &:hover svg {
                fill: #86909c;
            }
        }
        .title.active{
            color: #272e3b;
            background: #f7f8fa !important;
            svg{
                fill: #6b7785;
            }
        }
        .allowRole{
            color: #e2b46e;
            .svg-container{
                svg {
                    fill: #e2b46e;
                }
            }
            &:hover {
                color: #e2b46e;
                background-color: #f8e7c4;
            }
            &:hover svg {
                fill: #e2b46e;
            }
        }
        .allowRole.active{
            color: #e2b46e;
            background: #f8e7c4 !important;
            svg{
                fill: #e2b46e;
            }
        }
    }
}
.main-container{
    .topicList {
        margin-left: 10px;
        margin-right: 10px;
        .topicItem {
            margin: 0;
            height: 100%;
            border-bottom: 1px solid #f2f3f5;
            padding: 15px 15px 15px 15px;
            position: relative;
            .avatarBox {
                position: relative;
                margin-left: 0px;
                padding: 0;
                float: left;
                .avatarLink {
                    display: block;
                    position: relative;
                    float: left;
                    padding-left: 4px;
                    img {
                        float: none;
                        display: block;
                        width: 62px;
                        height: 62px;
                        float: left;
                        margin-right: 10px;
                        border-radius:62px;
                        position:relative;
                    }
                }
            }
            .content {
                /**
                overflow: auto;
                overflow-x: hidden;**/
                margin-left:88px;
                
                .info {
                    margin-top:2px;
                    margin-bottom: 2px;
                    color: #c9cdd4;
                    padding-left: 0;
                    list-style: none;
                    font-size:0;/*父级元素设置font-size:0; 解决 display：inline-block两个元素之间的默认空格 */
                    
                    .module{
                        display: inline-block;
                        min-width: 10px;
                        padding: 4px 7px;
                        font-size: 12px;
                        color: #1890ff;
                        line-height: 1;
                        vertical-align: baseline;
                        white-space: nowrap;
                        text-align: center;
                        background-color: #E8F7FF;
                        border-radius: 2px;
                        
                    }
                    .userName{
                        color: #86909c;
                        font-size: 15px;
                    }
                    .cancelNickname{
                        font-size: 14px;
                        font-weight:normal;
                        margin-right: 3px;
                        color: transparent;
                        text-shadow: 0 0 5px rgba(0,0,0,0.4);
                        zoom: 1;
                        user-select:none;
                    }
                    .userRoleName{
                        display: inline-block;
                        white-space:nowrap;
                        vertical-align: middle;
                        padding: 2px 4px;
                        margin-left:5px;
                        font-size: 12px;
                        line-height: 14px;
                        -webkit-border-radius: 2px;
                        -moz-border-radius: 2px;
                        border-radius: 2px;
                        color:#e2b46e;
                        background-color:#f8e7c4;
                        position: relative;
                        top: -5px;
                    }
                    .staff{
                        display: inline-block;
                        white-space:nowrap;
                        vertical-align: middle;
                        padding: 2px 4px;
                        margin-left:5px;
                        font-size: 12px;
                        line-height: 14px;
                        -webkit-border-radius: 2px;
                        -moz-border-radius: 2px;
                        border-radius: 2px;
                        color:#4CD263;
                        background-color:#cafcc7;
                        position: relative;
                        top: -5px;
                    }
                }
                .info>li{
                    display: inline-block;
                }
                .time {
                    font-size: 14px;
                    color: #a9aeb8;
                }
                .essence{
                    display: inline-block;
                    vertical-align: middle;
                    padding: 2px 4px;
                    margin-left:5px;
                    font-size: 14px;
                    line-height: 16px;
                    -webkit-border-radius: 2px;
                    -moz-border-radius: 2px;
                    border-radius: 2px;
                    color: #fff;
                    background-color: #F76560;
                    position: relative;
                    top: -6px;
                }
                .top{
                    display: inline-block;
                    vertical-align: middle;
                    padding: 2px 4px;
                    margin-left:5px;
                    font-size: 14px;
                    line-height: 16px;
                    -webkit-border-radius: 2px;
                    -moz-border-radius: 2px;
                    border-radius: 2px;
                    color: #fff;
                    background-color: #57A9FB;
                    position: relative;
                    top: -6px;
                }
                .title {
                    margin: 0 5px 0 0;
                    font-size:0;
                    font-weight: normal;
                    word-break: break-all;
                    a{
                        color: #272e3b;
                        font-size: 18px;
                        line-height: 32px;
                        &:hover {
                            text-decoration: none;
                            color: #1890ff;
                        }
                    }
                    .topicRoleName{
                        display: inline-block;
                        white-space:nowrap;
                        vertical-align: middle;
                        padding: 2px 4px;
                        margin-left:5px;
                        font-size: 14px;
                        line-height: 16px;
                        -webkit-border-radius: 2px;
                        -moz-border-radius: 2px;
                        border-radius: 2px;
                        color: #fff;
                        background-color:#F9CC45;
                        position: relative;
                        top: -6px;
                    }
                    .redEnvelope{
                        font-size: 22px;
                        position:relative;
                        top:4px;
                        color: #ff483a;
                        margin-left: 3px;
                    }
                    .hideTagType{
                        font-size:0;/*父级元素设置font-size:0; 解决 display：inline-block两个元素之间的默认空格 */
                        position:relative;top:-4px;
                        .circle{
                            border-radius:12px;display: inline-block;margin-left:5px;
                            width: 24px;height: 24px;
                            position:relative;
                            .icon{
                                margin-left: 5px;position:relative;top:4px;
                            }
                        }
                        .point{
                            &:before{
                                content: ' ';
                                position: absolute;
                                width: 4px;
                                height: 4px;
                                border-radius: 2px;
                                top: 13px;
                                left: 10px;
                            }
                        }
                    }

                }
                .detail{
                    position: relative;
                    .read-more {
                        color: #1890ff;
                        margin-left: 5px;
                        font-size: 14px;
                        &:hover {
                            color: #40a9ff;
                        }
                    }                    
                    
                    .summary{
                        margin: 5px 50px 0 0;
                        font-size: 15px;
                        line-height: 28px;
                        font-weight:normal;
                        text-decoration:none;
                        color: #86909c;
                    }
                }
                .bottomInfo{
                    margin-top:10px;
                    display: flex;
                    justify-content: space-between;
                    .tag-container{
                        float: left;
                        .tag{
                            display: inline-block;
                            white-space:nowrap;
                            margin-right: 5px;
                            padding: 0px 8px;
                            font-size: 14px;
                            line-height: 24px;
                            border-radius: 8px;
                            color: #898989;
                            background-color: #f5f5f5;
                        }
                    }
                    .statistic{
                        display: flex;
                        font-size: 14px;
                        position: relative;
                        top: 2px;
                        color: #a9aeb8;
                        .iconItem{
                            cursor: pointer;
                            display: flex;
                            justify-content: center;
                            align-items: center;
                            margin-right: 10px;
                            p{
                                vertical-align: middle;
                                margin: 0;
                                margin-left: 4px;
                                line-height: 1;
                                color: #2c2c2c;
                            }
                        }
                    }
                    
                }
            }
        }
    }
}
.left-container {
  .item {
      .title {
          // 修改为flex布局以支持两端对齐
          display: flex !important;
          justify-content: space-between;
          align-items: center;
          
          .text {
              flex: 1;
              margin-right: 8px;
          }
          
          .heat {
              display: flex;
              align-items: center;
              font-size: 12px;
              color: #86909c;
              white-space: nowrap;
              
              .heat-text {
                  margin-left: 4px;
              }
          }
      }
  }
}
</style>